<script setup lang="ts">

import {computed, onMounted, ref, watch} from 'vue'
import {fetchFooter} from "@/request/req.ts";
import {useRoute} from "vue-router"
import {commonStore} from '@/store/common.ts'

const common = commonStore()
const route = useRoute()
const id = computed(() =>route.query.id as string)
const message = ref<any>({})

const serverUrl = computed(() => {
  const item = common.getItemById(1)
  return item?.value
})

// 处理内容中的图片链接
const processedContents = computed(() => {
  if (!message.value.Contents) return ''

  // 将相对路径的图片链接转换为完整URL
  return message.value.Contents.replace(
    /src="\/upload\//g,
    `src="${serverUrl.value}/upload/`
  )
})

const getMessage =  async () => {
  message.value = await fetchFooter({id: id.value})
}
onMounted(() => {
  getMessage()
})
watch(id,() => {
  getMessage()
})
</script>

<template>
  <div style="background-color: #2c3e50; min-height: 100vh; display: flex; flex-direction: column;">
    <h2 style="color: white; padding: 20px; margin: 0; text-align: center;">{{ message.Title }}</h2>
    <div v-html="processedContents" style="padding: 0 20px 20px; flex-grow: 1; overflow-y: auto; max-width: 1000px; margin: 0 auto; width: 100%;">
    </div>
  </div>
</template>

<style scoped>

</style>
